<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的账户-个人设置</title>
    <!--公共样式-->
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/my-account.css">
    <script src="js/jquery-1.8.2.js"></script>

    <!--公共js-->
    <script src="js/common.js"></script>
    <script src="js/my-account.js"></script>
</head>
<body>
<!--head开始-->
<div class="head">
    <!--顶头-->
    <div class="top-head">
        <div class="top-menu">
            <!--左边-->
            <div class="top-left">
                <p>客服热线: &nbsp;400-050-3015</p>
                <!--微信二维码-->
                <div class="mobile">
                    <p class="icc" id="wechat">
                        <i class="Wechat"></i>微信
                    </p>
                    <!--二维码-->
                    <div class="wecgat-rq">
                    </div>
                </div>
                <!--QQ客服-->
                <p class="icc"><a href="javascript:;" target="_blank"><i class="QQ"></i>客服</a></p>

            </div>
            <!--右边-->
            <div class="top-right">
                <a target="_blank" href="enroll-1.html">快速注册</a>
                <a target="_blank" href="login.html">立即登录</a>
                <a target="_blank" href="help-center.html">帮助中心</a>
            </div>
        </div>
    </div>
    <!--LOGO及导航-->
    <div class="top-nav">
        <a href="index.html"><div class="logo"></div></a>
        <div class="nav-list">
            <ul>
                <li><a target="_blank" href="index.html">首页</a></li>
                <li><a target="_blank" href="invest.html">投资理财</a></li>
                <li><a target="_blank" href="borrow-money.html">借贷专区</a></li>
                <li><a target="_blank" href="secure.html">安全保障</a></li>
                <li><a target="_blank" href="anenst.html">关于我们</a></li>
                <li><a target="_blank" href="Beginners-Guide.html">新手引导</a></li>
                <li><a target="_blank" href="my-account.html" class="my-cons red"><i class="my-con"></i>我的账户</a></li>
            </ul>
        </div>
    </div>

</div>
<!--head结束-->
<div class="bd clearfix">
    <div class="kong"></div>
    <!---->
    <!--面包屑导航-->
    <div class="crumbs" style="background-color:#f3f3f3">
        <span><a href="javascript:;" title="当前位置">当前位置：</a></span>
        <span><a href="index.html" target="_blank" title="首页">首页</a>&nbsp;&gt;&nbsp;</span>
        <span><a href="my-account.html" style="color: #F3270D" target="_blank" title="我的账户">我的账户</a></span>

    </div>
    <div class="center">
        <!--左侧导航-->
        <div class="nav-left">
            <ul class="my-list">
                <li class="my-own nav-one"><i class="accicon-l-1"></i><a href="my-account.html">账户首页</a></li>
                <li class="my-own my-fund-1"><i class="accicon-l-2"></i>我的资金 <i class="accicon-r-1"></i></li>
                <div class="my-rec-1">
                    <ul>
                        <li><a href="my-recharge.html">充值</a></li>
                        <li><a href="my-withdraw.html">提现</a></li>
                    </ul>
                </div>
                <li class="my-own my-fund-2"><i class="accicon-l-3"></i>我的投资 <i class="accicon-r-2"></i></li>
                <div class="my-rec-2">
                    <ul>
                        <li><a href="my-investment.html">投资记录</a></li>
                        <li><a href="my-financing.html">资金记录</a></li>
                        <li><a href="my-drawmoney.html">提现记录</a></li>
                    </ul>
                </div>
                <li class="my-own my-fund-3"><i class="accicon-l-4"></i>我的借款 <i class="accicon-r-3"></i></li>
                <div class="my-rec-3">
                    <ul>
                        <li><a href="my-borrowing.html">借款记录</a></li>
                        <li><a href="my-payments.html">回款记录</a></li>
                    </ul>
                </div>
                <li class="my-own my-fund-4"><i class="accicon-l-5"></i>个人设置 <i class="accicon-r-4"></i></li>
                <div class="my-rec-4">
                    <ul>
                        <li><a href="my-setdatum.html" class="red">基本信息</a></li>
                        <li><a href="my-setsecure.html">安全中心</a></li>
                    </ul>
                </div>
                <li class="my-own"><i class="accicon-l-6"></i> <i class="acc-add"></i><a href="my-invite.html">我的邀请</a></li>
                <li class="my-own"><i class="accicon-l-7"></i><a href="my-brokerage.html">我的佣金</a></li>
            </ul>
        </div>

        <!--右侧内容-->
        <div class="center-box">
            <!--安全中心-->
            <div class="mysubs center-subs">
                <div class="center-subs-nav">
                    <ul>
                        <li class="red-bor">个人信息</li>
                        <li>头像设置</li>
                        <li>修改昵称</li>
                        <li>修改密码</li>
                    </ul>
                </div>
                <!--信息内容-->
                <div class="my-info-box">
                    <!--个人信息-->
                    <div class="center-subs-myinfo">
                        <h3><i class="wjx"></i>
                            温馨提示：亲爱的用户，为了节约您的宝贵时间，请认真准确填写以下信息，方便您借款和礼品的收取！
                        </h3>
                        <!--表单-->
                        <div class="form">
                            <form action=" ">
                                <div class="personal">
                                    <label>真实姓名</label><input type="text" id="name" class="infos"  />
                                </div>
                                <div class="personal">
                                    <label>最高学历</label>
                                    <select id="record" name="record" class="record">
                                        <option value="">请选择</option>
                                        <option value="1">硕士及以上</option>
                                        <option value="2">本科</option>
                                        <option value="3">专科</option>
                                        <option value="4">高中及以下</option>
                                    </select>
                                </div>
                                <div class="personal">
                                    <label>毕业学校</label><input type="text" class="infos"/>
                                </div>

                                <div class="personal">
                                    <label>婚姻状况</label>
                                    <select id="marriage" name="marriage" class="record">
                                        <option value="">请选择</option>
                                        <option value="1">已婚</option>
                                        <option value="2">未婚</option>
                                        <option value="3">其他</option>
                                    </select>
                                </div>

                                <div class="personal">
                                    <label>居住地址</label><input type="text" id="address" class="infos"/>
                                </div>
                                <div class="personal">
                                    <label>所在公司</label><input type="text" class="infos"/>
                                </div>
                                <div class="personal">
                                    <label>月收入</label>
                                    <select id=" " name="marriage" class="record">
                                        <option value="">请选择</option>
                                        <option value="1">100万及以上</option>
                                        <option value="2">50万-99万之间</option>
                                        <option value="3">30万-49万之间</option>
                                        <option value="3">10万-29万之间</option>
                                        <option value="3">5万-9万之间</option>
                                        <option value="3">3万-4.9万之间</option>
                                        <option value="3">1万-2.9万之间</option>
                                        <option value="3">5千-9千之间</option>
                                        <option value="3">5千以下</option>
                                    </select>
                                </div>
                                <div class="personal">
                                    <label>是否购房</label>
                                    <select id="house" name="house" class="record">
                                        <option value="">请选择</option>
                                        <option value="1">已购</option>
                                        <option value="2">未购</option>
                                    </select>
                                </div>
                                <div class="personal">
                                    <label>是否购车</label>
                                    <select id="vehicle" name="vehicle" class="record">
                                        <option value="">请选择</option>
                                        <option value="1">已购</option>
                                        <option value="2">未购</option>
                                    </select>
                                </div>
                                <div class="personal">
                                    <label>紧急联系人电话</label><input type="text" class="infos"/>
                                </div>
                                <div class="div-conform">
                                    <a href="javascript:;" class="conform" id="submit">保存</a>
                                </div>
                            </form>
                        </div>
                        <!--表单end-->
                    </div>
                    <!--头像-->
                    <div class="center-subs-myhead" style="display: none" >

                        <h3><i class="wjx"></i>
                            温馨提示：您可以通过修改用户头像来展示自己 ！
                        </h3>
                        <div class="container">
                            <div class="action">
                                <!-- <input type="file" id="file" style=" width: 200px">-->
                                <div class="new-contentarea tc">
                                    <a href="javascript:void(0)" class="upload-img">
                                        <label for="upload-file">上传头像</label>
                                    </a>
                                    <input type="file" class="" name="upload-file" id="upload-file" />
                                </div>
                            </div>
                        </div>

                    </div>
                    <!--昵称-->
                    <div class="center-subs-mynickname" style="display: none">
                        <h3><i class="wjx"></i>
                            温馨提示：昵称是您个性化的显示，也能更好的保护您账号的安全。
                        </h3>

                        <div class="mynickname">
                            <div class="mynickname-infos">
                                <form action="">
                                    <ul>
                                        <li>
                                            <label>用户名</label>
                                            <input type="text" value="18544785566" class="infos" disabled="disabled" />
                                        </li>
                                        <li>
                                            <label>昵称</label>
                                            <input type="text" value="18544785566" class="infos"  />
                                        </li>
                                    </ul>
                                </form>
                            </div>
                            <a href="javascript:;" class="mynickname-submit" id="submit-1">提交</a>
                        </div>
                        <!--修改成功-->
                        <div class="mynickname-suss" style="display: none">
                            <h2><i></i>修改成功</h2>
                        </div>
                    </div>

                    <!--修改密码-->
                    <div class="center-subs-mypassword" style="display: none">
                        <h3><i class="wjx"></i>
                            温馨提示：为了账号的安全请牢记的您的登录密码。
                        </h3>

                        <div class="mypassword">
                            <div class="mypassword-infos">
                                <form action="">
                                    <ul>
                                        <li>
                                            <label>原登录密码</label>
                                            <input type="text" value="" placeholder="请输入原密码" class="infos"/>
                                        </li>
                                        <li>
                                            <label>新登录密码</label>
                                            <input type="text" value="" placeholder="请设置新密码" class="infos"  />
                                        </li>
                                    </ul>
                                </form>

                                <a href="Forget-password.html" class="blue" style="margin-left: 420px;line-height: 30px;font-size: 14px">忘记原密码</a>
                            </div>
                            <a href="javascript:;" class="mypassword-submit" id="submit-2">提交</a>

                        </div>


                        <!--修改成功-->
                        <div class="mypassword-suss" style="display: none">
                            <h2><i></i>修改成功</h2>
                        </div>
                    </div>

                </div>

            </div>


        </div>

    </div>
</div>
<!--右侧悬浮回到顶部-->
<div class="toolbar" id="rights" style="display: none">
    <a href="javascript:;" class="toolbar-item toolbar-item-weixin">
        <span class="toolbar-layer"></span>
    </a>
    <a href="Feedback.html" class="toolbar-item toolbar-item-feedback"></a>
    <a href="javascript:;" id="returnTop" class="toolbar-item toolbar-item-top"></a>
</div>
<!--footer开始-->
<div class="footer">
    <div class="foo-conter">
        <div class="foo-t">
            <div class="foo-top">
                <div class="foo-one">
                    <ul>
                        <li>
                            <a target="_blank" href="business.html">业务模式</a>
                            <a target="_blank" href="anenst.html">关于我们</a>
                        </li>
                        <li>
                            <a target="_blank" href="secure.html">安全保障</a>
                            <a target="_blank" href="help-center.html">常见问题</a>
                        </li>
                        <li>
                            <a target="_blank" href="Franchise-chain.html">连锁加盟</a>
                            <a target="_blank" href="Franchise-chain.html">合作伙伴</a>
                        </li>
                    </ul>
                </div>
                <div class="foo-two">
                    <p>客服邮箱：kefu@bjdiandaitong.com</p>
                    <p><i class="tel"></i><b>400-050-3015</b></p>
                    <p>工作日：09:00~18:00 - 节假日：09:00~18:00</p>
                </div>
                <div class="foo-three">
                    <p>微信扫一扫</p>
                    <i></i>
                </div>
            </div>
        </div>

        <div class="foo-f">
            <div class="foo-fotr">
                <p>©2015 北京市典贷通信息服务有限公司 京ICP备15026559号 &nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.cnzz.com/stat/website.php?web_id=1255410260" title="站长统计"><em class=""><img src="http://icon.cnzz.com/img/pic.gif" alt=""></em></a></p>
                <p>北京市海淀区上地国际创业园2号院一号楼17层</p>
                <p>市场有风险 投资需谨慎</p>
                <div class="certification">
                    <a href="javascript:;"><i class="cer-1" title="诚信网站"></i></a>
                    <a href="javascript:;"><i class="cer-2" title="互联网金融行业认证"></i></a>
                    <a href="javascript:;"><i class="cer-3" title="行业认证"></i></a>
                    <a href="javascript:;"><i class="cer-4" title="360网站安全监测"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>
<!--footer结束-->
<script>
    $(function(){
        $(function(){
            $(".center-subs-nav li").click(function(){
                $(this).addClass("red-bor").siblings().removeClass("red-bor"); //切换选中的按钮高亮状态
                var index=$(this).index(); //获取被按下按钮的索引值，需要注意index是从0开始的
                $(".my-info-box > div").eq(index).show().siblings().hide(); //在按钮选中时在下面显示相应的内容，同时隐藏不需要的框架内容
            });
        });
        // 验证中文名称
        var ok2=false;
        function isChinaName(name) {
            var pattern = /^[\u4E00-\u9FA5]{1,6}$/;
            return pattern.test(name);
        }
        // 验证函数
        function formValidate() {
            var str = '';

            // 判断名称
            if ($.trim($('#name').val()).length == 0) {
                str += '姓名没有输入\n';
                alert(str);
                $('#name').focus();
            } else {
                if (isChinaName($.trim($('#name').val())) == false) {
                    str += '请输入正确的中文姓名\n';
                    alert(str);
                    $('#name').focus();
                }
            }

        }

        /*基本信息表单验证*/
        $('#submit').on('click', function() {
            formValidate();
            if(ok2){
                $('form').submit();
            }else{
                return false;
            }
        });


        $('#submit-1').click(function () {
            $('.mynickname').hide();
            $('.mynickname-suss').show();
        })
        $('#submit-2').click(function () {
            $('.mypassword').hide();
            $('.mypassword-suss').show();
        })
    });
</script>

<script>
</script>
</body>
</html>